<template>
    <div class="recharge_content2">
        <div class="card" @click="openRechargeComp(item.id,item.mc_price,item.is_shop,item.mc_type,item.mc_model)" v-for="item in money_card" :key="item.id">
            <img :src="$baseUrl+item.mc_img">
        </div>
        <h2>{{$t('Rule_Explanation')}}</h2>
        <div class="rule" v-if="lang == 'zh'">
            <p>1、 購買月卡後，您將直接在個人錢包中獲得相應的優惠券，這些優惠券可在所有遊戲中使用。</p>
            <p>2、 月卡無法使用 Y幣 購買，僅能通過直接儲值方式購買。</p>
            <p>3、 月卡購得的優惠券僅在月卡有效期內使用，過期無效。</p>
            <p>4、 月卡有效期為 30 天，購買後立即獲得 $4.99 無門檻優惠券7張，以及 $99.99的40% 抵扣券1張（龍珠專享）。</p>
            <p style="color: red;">5、 特別提醒：歪歪兔月卡屬於優惠卡券產品，已售出或未領取的部分恕不退換，請務必了解。</p>
        </div>
		
		<div class="rule" v-if="lang == 'en'">
		    <p>1. The coupons received after purchasing the monthly card will be credited at full price in the personal wallet. The coupons obtained through the savings card can be used in all games;</p>
            <p>2. The savings card cannot be purchased with Y coins and can only be purchased through direct top-up;</p>
            <p>3. Coupons purchased with the savings card should be used within the validity period of the monthly card;</p>
            <p>4. The monthly card is valid for 30 days, and upon opening the card, you will immediately receive a $4.99 unconditional discount coupon * 7 and a $99.99 * 40% deduction coupon * 1(Dragon Ball Exclusive);</p>
            <p style="color: red;">5. Special reminder: Wai Wai Tu's monthly card is a discount coupon product. No refunds or replacements will be provided once sold or if not collected. Please be aware;</p>

		</div>
    </div>

    <div ref="recharge_content" class="recharge_content" v-if="isEconomical">
        <RechargeComp :isEconomical="isEconomical" :closeBox="closeBox" :price="price" :sku_id='sku_id' :openDialog="openDialog"/>
    </div>
    <div class="blocker" v-if="isEconomical"></div>

    <BindAccount :visible="visible" :handleClose='handleClose' :getUserInfo="getUserInfo" :fb_bind_show="fb_bind_show" :yh_bind_show="yh_bind_show" :gg_bind_show="gg_bind_show"/>
    <view v-if="lang == 'en'">
		<Dialog :title="'Please confirm payment'" :title2="'Payment success can be viewed in the savings card collection record'" :cancel_title="'Not yet paid'" :sub_title="'Payment completed'" :visible="dialog_show" :handleClose='dialog_hide' :paySubmit="paySubmit"/>	
        <Dialog :title="'Facebook binding'" :title2="'Is Facebook successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
        <Dialog :title="'Yahoo binding'" :title2="'Is Yahoo successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_yh_bind" :handleClose='yh_bind_com' :paySubmit="yh_bind_com"/>
        <Dialog :title="'Google binding'" :title2="'Is Google successfully bound?'" :cancel_title="'Binding failed'" :sub_title="'Binding successful'" :visible="dialog_gg_bind" :handleClose='gg_bind_com' :paySubmit="gg_bind_com"/>
    </view>
	<view v-if="lang == 'zh'">
		<Dialog :title="'請確認付款'" :title2="'支付成功可在月卡領取記錄中查看'" :cancel_title="'還未支付'" :sub_title="'已完成支付'" :visible="dialog_show" :handleClose='dialog_hide' :paySubmit="paySubmit"/>	
        <Dialog :title="'Facebook绑定'" :title2="'Facebook是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_fb_bind" :handleClose='fb_bind_com' :paySubmit="fb_bind_com"/>
        <Dialog :title="'Yahoo绑定'" :title2="'Yahoo是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_yh_bind" :handleClose='yh_bind_com' :paySubmit="yh_bind_com"/>
        <Dialog :title="'Google绑定'" :title2="'Google是否綁定成功'" :cancel_title="'綁定失敗'" :sub_title="'綁定成功'" :visible="dialog_gg_bind" :handleClose='gg_bind_com' :paySubmit="gg_bind_com"/>
        
    </view>
</template>

<script setup>
    import RechargeComp from "@/components/recharge/rechargeComp/index.vue"
    import { ref,nextTick } from 'vue';
	import axios from '@/utils/api'
	import {useUserInfoStore} from '@/store/modules/user_info/index';
    import BindAccount from "@/components/UserCenter/bindAccount/index.vue"
    import Dialog from "@/components/Dialog/index.vue"
    import { useRouter } from 'vue-router';
	const router = useRouter()

	const user_infoStore = useUserInfoStore();
	const user_info = user_infoStore.userInfo;
	const userid = user_info.id

    let dialog_show = ref(false)
    const dialog_hide = () => {
        dialog_show.value = false
    }
    const openDialog = ()=>{
        dialog_show.value = true
    }
	const paySubmit = ()=>{
        console.log(coupon_typeE.value);
        
        if(coupon_typeE.value == 1){
            router.push('/recharge/collectionRecord')
        }else if(coupon_typeE.value == 2){
            router.push('/recharge/coupon')
        }
        
    }

    let isEconomical = ref(false)
    const closeBox = () => {
        isEconomical.value = false
		recharge_content.value.style.top='100%'
    };
    let price = ref(0)
	const sku_id = ref('')
	const money_card = ref([])
	const getList = async () =>{
		const list = await axios.get('/mcRecharge?user_id='+userid)
		money_card.value = list.data
		console.log(money_card.value);
	}
	getList()

	const recharge_content = ref()
    let coupon_typeE = ref('')
    const openRechargeComp = (id,mc_price,is_shop,mc_type,coupon_type)=>{
        coupon_typeE.value = coupon_type
        if(user_info.status == 0){
			visible.value = true
			return
		}
        if(is_shop){
			if(lang.value == 'en'){
				ElMessage.warning('already bought it')
			}else{
				ElMessage.warning('已經買過了')
			}
			return
		}
        isEconomical.value = true
		sku_id.value = id
		nextTick(()=>{
			console.log(recharge_content.value);
			recharge_content.value.style.top='0'
		})
        price.value = mc_price
    }

    const userInfo = ref([])
    const getUserInfo = async () =>{
        const data = {
            user_id:user_info.id,
        }
        const list = await axios.post('/getUserInfo',data)
        userInfo.value = list.data
        user_infoStore.setUserinfo(list.data.user_info)
    }
	

    const visible = ref(false)
	
    const handleClose = () => {
        visible.value = false
    };

    const lang = ref('')
	if(localStorage.getItem('lang') == 'en'){
		lang.value = 'en'
	}else{
		lang.value = 'zh'
	}


    let dialog_fb_bind = ref(false)
    const fb_bind_show = ()=>{
        dialog_fb_bind.value = true
    }
    const fb_bind_com = ()=>{
        getUserInfo()
        dialog_fb_bind.value = false
    }

    let dialog_yh_bind = ref(false)
    const yh_bind_show = ()=>{
        dialog_yh_bind.value = true
    }
    const yh_bind_com = ()=>{
        getUserInfo()
        dialog_yh_bind.value = false
    }

    let dialog_gg_bind = ref(false)
    const gg_bind_show = ()=>{
        dialog_gg_bind.value = true
    }
    const gg_bind_com = ()=>{
        getUserInfo()
        dialog_gg_bind.value = false
    }
</script>

<style lang="less" scoped>
.header {
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: #000;
	font-size: 20px;
	background-color: white;
	position: relative;
	border-bottom: 1px solid #bbb;
}
.fanhui{
	position: absolute;
}
.recharge_content2{
    text-align: center;
	width: 80%;
    .card{
        margin-top: 20px;
        cursor: pointer;
        position: relative;
        img{
            width: 100%;
        }
    }
    // .card:nth-child(2)::before{
	// 	content: '暫未開通';
	// 	background-color: rgba(0,0,0,.5);
	// 	width: 100%;
	// 	height:100%;
	// 	position: absolute;
	// 	top:0;
	// 	left: 0;
	// 	color: white;
	// 	font-size: 30px;
	// 	line-height: 270px;
    //     cursor: default;
    //     pointer-events: none;
	// }
	// .card:nth-child(3)::before{
	// 	content: '暫未開通';
	// 	background-color: rgba(0,0,0,.5);
	// 	width: 100%;
	// 	height:100%;
	// 	position: absolute;
	// 	top:0;
	// 	left: 0;
	// 	color: white;
	// 	font-size: 30px;
	// 	line-height: 270px;
    //     cursor: default;
    //     pointer-events: none;
	// }
    h2{
        padding: 20px;
    }
    .rule{
        width: 100%;
        font-size: 14px;
        padding-bottom: 20px;    
        text-align: left;
        p{
            margin: 10px 0;
        }
    }
}

.recharge_content{
    background-color: white;
    position: fixed;
    top: 50% !important;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    z-index: 10001;
    border-radius: 15px;
	padding: 20px 20px 50px;
	height: 680px;
    bottom: 0px;
	overflow: hidden;
    animation: popIn 0.3s ease-out;
}
.blocker{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,.5);
    z-index: 9999 !important;
}
</style>